<template>
  <div>
    <el-dialog
      :visible="visible"
      show-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      fullscreen
      destroy-on-close
      :custom-class="$style.editDialog"
      @open="onOpen"
      @close="onClose"
    >
      <!--查询-->
      <div :class="$style.root">
        <el-form :inline="true" :model="formQuery" label-position="right" size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="商品编码" :label-width="labelWidth">
                <el-input v-model="formQuery.goodsCode" placeholder="请输入" style="width: 90%" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="处理状态" :label-width="labelWidth">
                <el-select clearable v-model="formQuery.status" placeholder="请选择" style="width: 90%" filterable>
                  <el-option v-for="item in goodsStatusTypes" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="处方药" :label-width="labelWidth">
                <el-select clearable v-model="formQuery.isCf" placeholder="请选择" style="width: 90%" filterable>
                  <el-option label="是" value="Y" />
                  <el-option label="否" value="N" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建议原价毛利率" :label-width="labelWidth">
                <el-input-number
                  v-model="channelRangeStart"
                  controls-position="right"
                  :precision="5"
                  :step="0.0001"
                  style="margin-right: 2%;width: 43%"
                  size="mini"
                  label="最小值"
                  placeholder="请输入"
                />
                <span>~</span>
                <el-input-number
                  v-model="channelRangeEnd"
                  controls-position="right"
                  :precision="5"
                  :step="0.0001"
                  style="margin-left: 2%;width: 43%"
                  size="mini"
                  label="最大值"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="建议特价毛利率" :label-width="labelWidth">
                <el-input-number
                  v-model="activityRangeStart"
                  controls-position="right"
                  :precision="5"
                  :step="0.0001"
                  style="margin-right: 2%;width: 43%"
                  size="mini"
                  label="最小值"
                  placeholder="请输入"
                />
                <span>~</span>
                <el-input-number
                  v-model="activityRangeEnd"
                  controls-position="right"
                  :precision="5"
                  :step="0.0001"
                  style="margin-left: 2%;width: 43%"
                  size="mini"
                  label="最大值"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="筛选数据" :label-width="labelWidth">
                <el-select clearable v-model="formQuery.orderByFiled" placeholder="请选择" style="width: 60%" filterable>
                  <el-option v-for="item in orderByFiledList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                <el-select clearable v-model="formQuery.orderBy" placeholder="请选择" style="width: 30%" filterable>
                  <el-option label="从高到低" value="DESC" />
                  <el-option label="从低到高" value="ASC" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click="onQuery" type="primary" :loading="querying" size="mini">查询</el-button>
              <el-button @click="reset" type="info" size="mini">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div :class="$style.operateBtns">
        <div>
          <el-button type="danger" @click="onOpenImportModal" size="mini">导入价格</el-button>
          <el-button type="success" @click="exportGoodsPrice" :loading="exporting" size="mini">导出价格</el-button>
          <el-button type="warning" @click="onAllAudit" size="mini">全部审核</el-button>
          <el-button type="primary" @click="onBatchAudit" size="mini">批量审核</el-button>
        </div>
        <div>
          <el-dropdown type="primary" split-button :hide-on-click="false" size="mini">
            <span>筛选字段</span>
            <el-dropdown-menu slot="dropdown">
              <el-scrollbar style="height:60vh;">
                <el-dropdown-item>
                  <el-checkbox label="全选" :checked="checkAll" :indeterminate="!checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                </el-dropdown-item>
                <el-checkbox-group v-model="allCheckedCols">
                  <el-dropdown-item v-for="column in bindTableColumns" :key="column.label">
                    <el-checkbox :label="column.prop" :disabled="column.disabled">{{ column.label }}</el-checkbox>
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-scrollbar>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!--列表-->
      <div>
        <el-table
          :data="data"
          :border="true"
          :header-cell-class-name="$style.tableHeaderCell"
          :cell-class-name="$style.tableCell"
          :cell-style="customStyle"
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%;font-size: 12px;"
          max-height="600"
          ref="goodsTable"
          size="mini"
          @cell-click="cellClick"
          row-key="id"
        >
          <el-table-column type="selection" align="center" width="40" fixed :reserve-selection="true"></el-table-column>
          <el-table-column
            v-for="item in checkedTableColumns"
            align="center"
            :key="item.prop + '-' + item.index"
            :prop="item.prop"
            :label="item.label"
            :min-width="item.minWidth"
            :show-overflow-tooltip="item.showTooltip"
          >
            <template slot-scope="scope">
              <div v-if="item.isEdit">
                <div v-if="scope.row.status === 'INIT' || scope.row.status === 'REBUT'">
                  <el-input-number
                    v-if="
                      scope.row.seenObj && scope.row.seenObj[item.prop] && (item.prop === 'auditChannelPrice' || item.prop === 'auditActivityPrice')
                    "
                    v-model="scope.row[item.prop]"
                    v-focus
                    :controls="false"
                    :precision="2"
                    :step="0.01"
                    size="mini"
                    placeholder="请输入"
                    :min="0"
                    style="width: 100%"
                    @blur="tableColumnBlur(scope.$index, scope.row, item.prop)"
                    @keyup.enter.native.stop.prevent="tableColumnEnter(scope.$index, scope.row, item.prop, $event)"
                  />
                  <el-input-number
                    v-if="
                      scope.row.seenObj && scope.row.seenObj[item.prop] && item.prop !== 'auditChannelPrice' && item.prop !== 'auditActivityPrice'
                    "
                    v-model="scope.row[item.prop]"
                    v-focus
                    :controls="false"
                    :precision="0"
                    :step="1"
                    size="mini"
                    placeholder="请输入"
                    :min="-1"
                    style="width: 100%"
                    @blur="tableColumnBlur(scope.$index, scope.row, item.prop)"
                    @keyup.enter.native.stop.prevent="tableColumnEnter(scope.$index, scope.row, item.prop, $event)"
                  />
                  <div :class="$style.editNormal" v-if="!(scope.row.seenObj && scope.row.seenObj[item.prop])">
                    <span>{{ scope.row[item.prop] }}</span>
                    <i class="el-icon-edit"></i>
                  </div>
                </div>
                <div v-if="scope.row.status !== 'INIT' && scope.row.status !== 'REBUT'">
                  <span>{{ scope.row[item.prop] }}</span>
                </div>
              </div>
              <div v-else>
                <div v-if="item.prop === 'isCf'">
                  {{ scope.row.isCf === 'Y' ? '是' : '否' }}
                </div>
                <div v-else-if="item.prop === 'isMarketing'">
                  {{ scope.row.isMarketing === 'Y' ? '是' : '否' }}
                </div>
                <div v-else-if="item.prop === 'status'">
                  <span :style="{ color: scope.row.status === 'REJECTED' || scope.row.status === 'REBUT' ? 'red' : 'inherit' }">
                    {{ formatStatusText(scope.row.status) }}
                  </span>
                </div>
                <div v-else-if="item.prop === 'remark'">
                  <span :style="{ color: scope.row.status === 'REJECTED' || scope.row.status === 'REBUT' ? 'red' : 'inherit' }">
                    {{ scope.row[item.prop] }}
                  </span>
                </div>
                <div v-else>
                  {{ scope.row[item.prop] }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div :class="$style.tablePagination">
          <el-pagination
            @size-change="onPageSizeChange"
            @current-change="onPageNumChange"
            :current-page="currentPage"
            :page-sizes="[100, 200]"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes"
            :total="total"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
